<template>
    <el-dropdown trigger="click" class='international-icon' @command="handleSetLanguage">
        <div>
           <icon-view class="icon" icon="icon-icon_A"></icon-view>
        </div>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="zh" :disabled="language==='zh'">中文</el-dropdown-item>
            <el-dropdown-item command="en" :disabled="language==='en'">English</el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown></template>
<script>
    import iconView from '../IconView/IconView'
    export default {
        name: 'LangSelect',
        components:{
            iconView
        },
        computed: {
            language() {
                return this.$store.getters.language
            }
        },
        methods: {
            handleSetLanguage(lang) {
                this.$i18n.locale = lang
                this.$store.dispatch('setLanguage', lang)
                this.$notify({
                  title: lang=='en'?'tips':'提示',
                  message: lang=='zh'?'切换成功':'switch language success',
                  type: 'success',
                  offset: 100,
                  showClose: false
                })
            }
        }
    }
</script>
<style scoped>
    .international-icon {
        font-size: 20px;
        cursor: pointer;
        width: 100px;
    }
    .icon {
        width: 28px;
        height: 28px;
        line-height: 28px;
        position: absolute;
    }
</style>
